
//路由的守卫

//需求:
//1.判断本地的用户是否登入(token),如果登入则可以正常访问页面,如果未登入,那么跳转回登入页

//2.如果用户在未登入的情况下访问"/login"这个路径,要允许通过

//核心的思路就是通过判断用户是否登入,接合navigate来决定是否要跳转到登入页

//参数

//tokenKey 一个token存到本地的标识符

//routes 是一个符合react配置的路由配置

import { Iroute } from "../router/index"
import { useRoutes, useLocation, useNavigate } from "react-router-dom"
import React, { useEffect } from "react"

let useBeforeEach = (tokenKey: string, routes: Array<Iroute>): React.ReactNode => {
    //使用useRoutes这个hook来返回路由的配置
    let El = useRoutes(routes)
    //通过tokenKey去本地查找是否有这个token
    let token = sessionStorage.getItem(tokenKey);
    //获取location对象
    let location = useLocation()
    // console.log(location)
    let navigate = useNavigate()

    useEffect(() => {
        if (!token) {
            //没有token说明没有登入,就要跳转到登入页

            //没有登入还需要判断是不是访问的"/login",如果不是,也跳转到登入页
            if (location.pathname !== "/login") {
                //跳转到登入页
                navigate('/login')
            }

        }
    }, [location])

    return El
}


export default useBeforeEach